<template>
	<view>
		<Skeleton v-if="skeletonLoading" type="newsListDetail"></Skeleton>
		<view class="list_wrapper">
			<view class="list_block">
				<view class="title">
					{{ info.title }}
				</view>
				<view class="time">
					{{ info.addtime | timeFilter }}
					<view class="num">{{ info.click }}</view>
				</view>
			</view>
			<view class="notice_content" v-if="info.content">
				<u-parse :html="info.content"></u-parse>
			</view>
		</view>
		<view class="jump_block">
			<view class="jump_content">
				<view class="form_split_10"></view>
				<text class="link prev" @click="handleClick('/commonViews/NoticeShow?id=','prev')"
					v-if="prev !== null">上一篇： {{ prev.title }}
				</text>
				<text class="link prev" v-else>上一篇： -</text>
				<text class="link next" @click="handleClick('/commonViews/NoticeShow?id=','next')"
					v-if="next !== null">下一篇： {{ next.title }}
				</text>
				<text class="link next" v-else>下一篇： -</text>
			</view>
		</view>
		<view class="form_split_10"></view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	import Subscribe from './components/Subscribe'
	import {
		onShareAppMessage,
		onShareTimeline
	} from '@/utils/share.js'
	import Skeleton from '@/components/Skeleton.vue'
	export default {
		name: 'NoticeShow',
		components: {
			Subscribe,
			Skeleton
		},
		filters: {
			timeFilter(timestamp) {
				return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
			}
		},
		data() {
			return {
				pageTitle: '',
				id: 0,
				info: {},
				prev: {},
				next: {},
				skeletonLoading: true
			}
		},
		watch: {
			$Route(to, from) {},
			id(val) {
				this.fetchData()
			}
		},
		onShareAppMessage() {
			return onShareAppMessage({
				url: '/commonViews/NoticeShow?id=' + this.id,
				alias: "noticeshow",
				info: this.info
			})
		},
		onShareTimeline() {
			return onShareTimeline({
				url: '/commonViews/NoticeShow?id=' + this.id,
				alias: "noticeshow",
				info: this.info
			})
		},
		onLoad(e) {
			this.id = e.id ? e.id : 0
		},
		mounted() {
			this.fetchData()
		},
		methods: {
			handleClick(path, type) {
				let prevId = !this.prev.link_url ? this.prev.id : this.prev.link_url
				let nextId = !this.next.link_url ? this.next.id : this.next.link_url
				if (type == 'prev') {
					uni.navigateTo({
						url: path + prevId
					})
				} else if (type == 'next') {
					uni.navigateTo({
						url: path + nextId
					})
				}
			},
			fetchData() {
				http
					.get(api.notice_show, {
						id: this.id
					})
					.then(res => {
						const {
							info,
							prev,
							next
						} = {
							...res.data.data
						}
						this.info = info
						this.prev = prev
						this.next = next
						this.pageTitle =
							this.info.title + ' - ' + this.$store.state.config.sitename
						let wechatShareInfo = {
							title: info.title
						}
						this.skeletonLoading = false
					})
					.catch(() => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.follow_block {
		.follow_content {
			.content {
				.logo {
					position: absolute;
					width: 90rpx;
					height: 90rpx;
					left: 34rpx;
					top: 48rpx;
					border: 0;
					font-size: 24rpx;
				}

				.follow_btn {
					position: absolute;
					right: 34rpx;
					top: 56rpx;
					padding: 14rpx 40rpx;
					font-size: 28rpx;
					color: #ffffff;
					line-height: 36rpx;
					background-color: #1787fb;
					border-radius: 64rpx;
				}

				.txt {
					font-size: 26rpx;
					color: #999999;
					line-height: 32rpx;
					padding-left: 150rpx;
				}

				.name {
					font-size: 34rpx;
					color: #333333;
					font-weight: bold;
					padding: 40rpx 0 16rpx 150rpx;
					line-height: 40rpx;
				}

				position: relative;
				width: 100%;
				height: 100%;
			}

			background-color: #ffffff;
			width: 100%;
			height: 176rpx;
		}

		position: relative;
		width: 100%;
		height: 176rpx;
	}

	.jump_block {
		.jump_content {
			.link {
				font-size: 28rpx;
				color: #333333;
				line-height: 36rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				display: block;
			}

			.next {
				padding: 8rpx 34rpx 24rpx;
			}

			.prev {
				padding: 24rpx 34rpx 8rpx;
			}

			background-color: #ffffff;
			width: 100%;
		}

		position: relative;
	}

	.notice_content {
		image {
			max-width: 100%;
		}

		line-height: 1.8;
		font-size: 28rpx;
		color: #333333;
		padding: 20rpx 0;
		word-break: break-all;
	}

	.list_wrapper {
		.list_block {
			.time {
				.num {
					position: absolute;
					right: 0;
					top: 0;
					font-size: 24rpx;
					color: #999999;
					height: 32rpx;
					background-image: url($ImgUrl + "com_man_ic2.png");
					background-repeat: no-repeat;
					background-position: 0 6rpx;
					background-size: 26rpx 20rpx;
					padding-left: 34rpx;
				}

				position: relative;
				padding-left: 34rpx;
				font-size: 24rpx;
				color: #999999;
				height: 32rpx;
				background-image: url($ImgUrl + "com_man_i3.png");
				background-position:0 4rpx;
				background-repeat:no-repeat;
				background-size: 24rpx;
			}

			.title {
				line-height: 1.6;
				word-break: break-all;
				font-size: 36rpx;
				color: #333333;
				margin-bottom: 14rpx;
				font-weight: bold;
			}

			width: 100%;
			position: relative;
			padding: 26rpx 0;
			display: block;
			border-bottom: 2rpx solid #f3f3f3;
		}

		background-color: #ffffff;
		padding: 0 34rpx;
	}
</style>